<template>
    <div class="banner">
        <SelectTheRegion v-if="props.itemData.id == draggableItem.id" @delItem="delItem"></SelectTheRegion>
        <el-carousel height="200px" motion-blur>
            <el-carousel-item v-for="item in 4" :key="item">
                <div class="small justify-center">
                    <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script setup lang='ts'>
import SelectTheRegion from "@/pages/lowCode/components/lowCodeAdd/lowCodeContent/selectTheRegion/index.vue"
import { storeToRefs } from 'pinia'
import { lowCode } from "@/store/modules/lowCode"
const lowCodeStore = lowCode();
const { draggableItem } = storeToRefs(lowCodeStore);
const props: any = defineProps({
    itemData: {
        type: Object,
        default: []
    },
    del: {
        type: Function // 假设 del 是一个函数类型的 prop
    }
})
const delItem = () => {
    props.del(props.itemData)
    
}
</script>
<style lang="scss" scoped>
.banner {
    width: 100%;
    height: 200px;
    position: relative;
}

.small {
    width: 100%;
    height: 200px;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>